<template>
    <view class="container" v-if="tabList.length">
        <tabs
            :current="current"
            @change="handleChange"
            height="80"
            bar-width="60"
            :barStyle="{ bottom: '0' }"
            :auth="true"
            activeColor="#3B84D3"
            inactiveColor="#303133"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="`${item.name}(${item?.count})`">
                <view class="List pt-[20rpx]" v-if="isLogin">
                    <List :cid="item.id" :i="i" :index="current" :goodsId="goodsId"></List>
                </view>
            </tab>
        </tabs>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiEvaluateGoodsLists } from '@/api/goods'
import List from './components/list.vue'
import { useUserStore } from '@/stores/user'
import { apiEvaluateGoodsStatis } from '@/api/goods'

const goodsId = ref<number>(8)

const tabList = ref<any>([
    {
        name: '全部',
        count: 0
    },
    {
        name: '好评',
        count: 0
    },
    {
        name: '中评',
        count: 2
    },
    {
        name: '差评',
        count: 0
    },
    {
        name: '晒图',
        count: 0
    }
])
const current = ref<number>(0)
// 是否登录
const userStore = useUserStore()
const isLogin = computed(() => userStore.token)

const handleChange = (index: number) => {
    current.value = Number(index)
}

// 获取评价统计数据
const getEvaluateStatis = async () => {
    const res = await apiEvaluateGoodsStatis({ goodsId: goodsId.value })
    tabList.value[0].count = res.totalCount
    tabList.value[1].count = res.goodCount
    tabList.value[2].count = res.generalCount
    tabList.value[3].count = res.badCount
    tabList.value[4].count = res.pictureCount
}

onLoad((options: any) => {
    goodsId.value = options.id || 0
    getEvaluateStatis()
})
</script>

<style lang="scss">
.container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
}

.main {
    flex: 1;
    min-height: 0;
    overflow: scroll;
    swiper {
        height: 100%;
    }
}
.List {
    height: calc(100vh - 86px - env(safe-area-inset-bottom));
}
</style>
